<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
table标签的属性
    cellspacing="0"， 设置单元格边框线之间距离设置为0，2个边框线贴在一起
    cellpadding="5px" ,设置单元格边框线距离内容的大小（内边距）
    样式：style="border-collapse: collapse" 设置边框线进行合并成1条

caption标签：表格的标题标签，是table的子标签，显示在表格上方居中对齐

td标签属性：
    跨行合并：rowspan
    跨列合并：colspan

table标签的逻辑结构【了解】
    表格的逻辑分3个部分组成
    thead, 表格的头部，列标题适合在头部（可有可无）
    tbody，表格的主体内容， 数据行适合在主体内容(必须有)
    tfoot，表格的脚部（尾部）,小计、总计等数据适合在脚部(可有可无)
    注意：如果没有设置逻辑划分，默认table的所有tr标签都被tbody包裹着，也是table子标签
         这3个逻辑划分没有效果，只是为了可读性好
    表格真实的默认结构table->tbody->tr->td/th  四层结构

-->
<table border="1px" cellspacing="0" cellpadding="5px"  style="border-collapse: collapse" width="50%" align="center">
    <caption>学生成绩表</caption>
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>成绩</th>
    </tr>
    </thead>
    <tbody>
    <tr align="center">
        <td>100</td>
        <td>潘金莲</td>
        <td>女</td>
        <td>80</td>
    </tr>
    <tr align="center">
        <td>200</td>
        <td>武大郎</td>
        <td>男</td>
        <td rowspan="2">90</td>
    </tr>
    <tr align="center">
        <td>300</td>
        <td>播妞</td>
        <td>女</td>
    </tr>
    </tbody>
    <tfoot>
    <tr align="center">
        <td>总成绩</td>
        <td colspan="3">900</td>
    </tr>
    </tfoot>
</table>
</body>
</html>